<template>
	<!-- 商品推荐 -->
	<div class="goods-block">
		<van-cell :title="title" :icon="icon" class="section-title"></van-cell>
		<van-row type="flex" justify="center">
			<van-col span="7" class="goods-item" v-for="(item, i) in productItems" :key="i"
				@click="onDetail(item.product_id)">
				<!-- 图片 -->
				<van-image :src="APIDomainName + item.pic" class="goods-image"></van-image>
				<!-- 商品名 -->
				<div class="goods-title van-ellipsis">{{ item.title }}</div>
				<!-- 单价 -->
				<div class="price">￥{{ item.price.toFixed(2) }}</div>
			</van-col>
		</van-row>
	</div>
</template>

<script>
	export default {
		name: 'homeProduct',
		props: {
			productItems: Array,
			title: String,
			icon: String,
		},
		methods: {
			onDetail(id) {
				this.$router.push(`/product/detail/${id}`);
			}
		}
	};
</script>

<style scoped>
	@bgColorLight: #f0f1f4;
	@bgColorMedium: #e0e2e5;
	@bgColorDark: #fafcff;
	@textColorPrimary: #333;
	@textColorSecondary: #666;
	@priceColor: #e74c3c;

	.goods-block {
		background-color: @bgColorLight;
		padding: 15px;
		border-radius: 10px;
		box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);
		margin-bottom: 15px;
	}

	.section-title {
		font-size: 18px;
		background-color: @bgColorMedium;
		border-radius: 8px;
		padding: 10px;
		color: @textColorPrimary;
		margin-bottom: 10px;
		text-align: center;
	}

	.goods-item {
		display: flex;
		flex-direction: column;
		background-color: @bgColorDark;
		margin: 5px;
		padding: 10px;
		border-radius: 10px;
		box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
	}

	.goods-item:hover {
		box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.15);
		transform: translateY(-3px);
	}

	.goods-image {
		width: 100%;
		height: 150px;
		object-fit: cover;
		border-radius: 8px;
		margin-bottom: 10px;
	}

	.goods-title {
		font-size: 16px;
		color: @textColorPrimary;
		margin-bottom: 5px;
	}

	.price {
		font-size: 18px;
		font-weight: bold;
		color: @priceColor;
		text-align: right;
	}
</style>